<script setup lang="ts">
import {ref} from "vue";

const emits = defineEmits(['callBack']);

var  selectedIndex = ref(0)
const itemClick=(index:number)=>{
    selectedIndex.value = index
    emits("callBack",index)
}
</script>

<template>
  <div class="container">
    <ul class="nav">
      <li class="nav-item" :class="{active:selectedIndex == 0}" @click="itemClick(0)">企业简介</li>
      <li class="nav-item" :class="{active:selectedIndex == 1}" @click="itemClick(1)">发展历程</li>
      <li class="nav-item" :class="{active:selectedIndex == 2}" @click="itemClick(2)">企业文化</li>
      <li class="nav-item" :class="{active:selectedIndex == 3}" @click="itemClick(3)">公司要闻</li>
      <li class="nav-item" :class="{active:selectedIndex == 4}" @click="itemClick(4)">媒体关注</li>
      <li class="nav-item" :class="{active:selectedIndex == 5}" @click="itemClick(5)">社会责任</li>
      <li class="nav-item" :class="{active:selectedIndex == 6}" @click="itemClick(6)">视频中心</li>
    </ul>
    <div class="right">
      <a>首页</a>
      >
      <a>走进圣湖</a>
      > 企业简介
    </div>
  </div>


</template>

<style scoped lang="scss">

.container{
  position: relative;
  clear: both;
  overflow: hidden;
  cursor: default;
}

.nav {
  list-style-type: none;
  margin-left: 80px;
  height: 50px;
  float: left;
}
.nav-item{
  display: inline-block;
  margin-right: 30px;
  font-size: 1.1rem;
  line-height: 50px;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}

.active {
  color: red;
}

.right{
  top: 20px;
  float: right;
  width: 200px;
  line-height: 50px;
}
</style>